export default {
    data: {
        activeTab: "tab0",
        lineData: [
            {
                strokeColor: '#0081ff',
                fillColor: '#cce5ff',
                data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
                gradient: true,
            }
        ],
        lineOps: {
            xAxis: {
                min: 0,
                max: 20,
                display: false,
            },
            yAxis: {
                min: 0,
                max: 1000,
                display: false,
            },
            series: {
                lineStyle: {
                    width: "5px",
                    smooth: true,
                },
                headPoint: {
                    shape: "circle",
                    size: 20,
                    strokeWidth: 5,
                    fillColor: '#ffffff',
                    strokeColor: '#007aff',
                    display: true,
                },
                loop: {
                    margin: 2,
                }
            }
        },
        barData: [
            {
                fillColor: '#f07826',
                data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628],
            },
            {
                fillColor: '#cce5ff',
                data: [535, 776, 615, 444, 694, 785, 677, 609, 562, 410],
            },
            {
                fillColor: '#ff88bb',
                data: [673, 500, 574, 483, 702, 583, 437, 506, 693, 657],
            },
        ],
        barOps: {
            xAxis: {
                min: 0,
                max: 20,
                display: false,
                axisTick: 10,
            },
            yAxis: {
                min: 0,
                max: 1000,
                display: false,
            },
        },
        opts1:{
            width: 320,
            height: 300,
            // grid: {
            //     top: 5,
            //     left: 5,
            //     right: 5,
            //     bottom: 5,
            // },
            xAxis: {
                // show: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            // yAxis: {
            //     show: false,
            //     splitLine: {
            //         show: false,
            //     },
            // },
            series: [
                {
                    type: 'bar',
                    data: [
                        100, 500, 600, 640, 600, 500, 100, 150, 500, 550, 650, 450, 160, 240, 300, 680, 540, 430, 420,
                    ],
                },
                {
                    type: 'line',
                    // smooth: true,
                    lineWidth: 2,
                    // symbol: 'none',
                    data: [
                        100, 500, 600, 640, 600, 500, 100, 150, 500, 550, 650, 450, 160, 240, 300, 680, 540, 430, 420,
                    ],
                },
                {
                    name: 'Email',
                    type: 'line',
                    smooth: true,
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                },
                {
                    name: 'Union Ads',
                    type: 'bar',
                    smooth: true,
                    data: [220, 282, 291, 234, 290, 330, 310],
                },
                {
                    name: 'Video Ads',
                    smooth: true,
                    type: 'line',
                    data: [420, 552, 480, 580, 490, 530, 420],
                },
                {
                    name: 'Direct',
                    type: 'line',
                    smooth: true,
                    data: [620, 632, 601, 634, 690, 630, 620],
                },
                {
                    name: 'Search Engine',
                    type: 'line',
                    smooth: true,
                    data: [820, 932, 901, 800, 1290, 1330, 1320],
                },
            ],
        },
        opts2: {
            width: 320,
            height: 300,
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['0%', '50%'],
                    data: [
                        { value: 1048, name: 'Search Engine' },
                        { value: 735, name: 'Direct' },
                        { value: 580, name: 'Email' },
                        { value: 484, name: 'Union Ads' },
                        { value: 300, name: 'Video Ads' },
                    ],
                },
            ],
        }
    },
    onInit() {
        //		console.log(this.wireframeIcons.length);
        //		console.log(this.solidIcons.length);
    },
    // 自定义组件布局完成
    onReady() {

    },
    computed: {
        tab0() {
            if (this.activeTab == "tab0") {
                return "active-tab"
            }
            return ""
        },
        tab1() {
            if (this.activeTab == "tab1") {
                return "active-tab"
            }
            return ""
        },
        tab2() {
            if (this.activeTab == "tab2") {
                return "active-tab"
            }
            return ""
        },
        tab3() {
            if (this.activeTab == "tab3") {
                return "active-tab"
            }
            return ""
        }
    },
    changeTab: function (e) {
        if (e != this.activeTab) {
            this.$set("activeTab", e);
        }
    },
    addData() {
        this.$refs.linechart.append({
            serial: 0,
            data: [Math.floor(Math.random() * 400) + 400]
        })
    }
}
